<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Favicon icon -->
    <!--<link rel="stylesheet" href="css/iview.min.css">-->
    <!--<link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">-->
    <link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.ico">
    <title>壹脉智能CRM</title>
    <!-- Bootstrap Core CSS -->
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <!-- <link href="../assets/node_modules/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet"> -->
    <!-- This page CSS -->
    <!-- chartist CSS -->
    <!-- <link href="../assets/node_modules/morrisjs/morris.css" rel="stylesheet"> -->
    <!--c3 CSS -->
    <!-- <link href="../assets/node_modules/c3-master/c3.min.css" rel="stylesheet"> -->
    <!--Toaster Popup message CSS -->
    <!-- <link href="../assets/node_modules/toast-master/css/jquery.toast.css" rel="stylesheet"> -->
    <!-- Custom CSS -->
    <link href="css/style.min.css" rel="stylesheet">
    <!-- Dashboard 1 Page CSS -->
    <!--<link href="css/pages/dashboard1.css" rel="stylesheet">-->
    <!-- You can change the theme colors from here -->
    <link href="css/colors/default.css" id="theme" rel="stylesheet">
    <link rel="stylesheet" href="css/diy.min.css">
    <!--<link href="../assets/node_modules/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../assets/node_modules/bootstrap-table/dist/bootstrap-table.min.css" rel="stylesheet" type="text/css"/>-->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body class="fix-header fix-sidebar card-no-border">
<div class="preloader">
    <div class="loader">
        <div class="loader__figure"></div>
        <p class="loader__label">壹脉</p>
    </div>
</div>
<div id="main-wrapper">
    <header class="topbar">
        <nav class="navbar top-navbar navbar-expand-md navbar-light">
            <div class="navbar-header">
                <a class="navbar-brand" href="../index.html">
                    <b>
                        <img src="../assets/images/diy/yimai.png" alt="homepage" class="dark-logo"/>
                        <!--<img src="../assets/images/logo-light-icon.png" alt="homepage" class="light-logo"/>-->
                    </b>
                    <span>
                        <span class="fs18 cblue p-l-6 fbold">壹脉智能CRM</span>
                    </span>
                </a>
            </div>
            <div class="navbar-collapse">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item"><a class="nav-link nav-toggler hidden-md-up waves-effect waves-dark"
                                            href="javascript:void(0)"><i class="sl-icon-menu"></i></a></li>
                    <li class="nav-item"><a class="nav-link sidebartoggler hidden-sm-down waves-effect waves-dark"
                                            href="javascript:void(0)"><i class="sl-icon-menu"></i></a></li>
                </ul>
                <user-head></user-head>
            </div>
        </nav>
    </header>
    <aside class="left-sidebar">
        <div class="scroll-sidebar">
            <company-position></company-position>
            <nav class="sidebar-nav p-0">
                <c-slider current="4"></c-slider>
            </nav>
        </div>
    </aside>
    <div class="page-wrapper">

        <div class="container-fluid">

            <div class="row page-titles">
                <div class="col-md-5 align-self-center">
                    <h3 class="text-themecolor">客户管理</h3>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="javascript:void(0)">HOME</a></li>
                        <li class="breadcrumb-item active">总客户池</li>
                    </ol>
                </div>
            </div>


            <!--列表-->
            <div class="row bgfff">
                <ul class="nav w100p nav-tabs customtab position-relative" role="tablist">
                    <li class="nav-item" v-for="(v,k) in navs" :key="k">
                        <a class="nav-link curpointer" data-toggle="tab" role="tab"
                           :class="v.id == navs_id ? 'active' : '' "
                           @click="changeNav(v.id)">
                            <span class="hidden-sm-up">
                                <i class="ti-home"></i>
                            </span>
                            <span class="hidden-xs-down">{{v.title}}</span>
                        </a>
                    </li>
                    <li class="position-absolute top21 bottom0 right30">
                        <span class="p-l-20 p-r-20 bgblue cfff bradius4 curpointer fs14 lh30 d-block"
                              @click="addClient">客户录入</span>
                    </li>
                </ul>

                <div class="d-flex p-t-20 w100p p-r-31 p-b-17">
                    <div class="mr-auto d-flex p-l-30 fs14 cfff lh30 align-cen">
                        <template v-if="navs_id != 4">
                            <template v-if="navs_id != 2">
                                <span class="p-l-20 p-r-19 bradius4 m-r-10" :class="isChooseClient ? 'bgblue' : 'bgblue_2'" @click="showMemberList">移至成员</span>
                                <span class="p-l-20 p-r-19 bradius4 m-r-10" :class="isChooseClient ? 'bgblue' : 'bgblue_2'" @click="moveCustomer(2)">移至共享</span>
                            </template>
                            <template v-else>
                                <span class="p-l-20 p-r-19 bradius4 m-r-10" :class="isChooseClient ? 'bgblue' : 'bgblue_2'" @click="toMonopoly">抢为独占</span>
                            </template>
                        </template>
                        <span class="p-l-20 p-r-19 bradius4 m-r-10 bgblue" @click="exportData">导出</span>

                    </div>

                    <div class="ml-auto d-flex align-cen">
                        <div class="m-r-21">
                            <div class="form-group m-b-0 w241">
                                <input type="text" id="company" class="form-control p-l-23 phgray"
                                       placeholder="请输入姓名或电话用户" v-model="clientkey">
                            </div>
                        </div>
                        <span class="bgblue p-l-20 p-r-19 bradius4 m-r-10 cfff fs14 lh30" @click="searchClient">查询</span>

                    </div>
                </div>

                <div class="row w100p p-l-30">
                    <div class="col-12">
                        <div class="card m-b-0">
                            <table id="example23" class="align-cen-table textc display nowrap table table-hover table-bordered bgf6f9fa m-b-20">
                                <thead>
                                <tr>
                                    <th>
                                        <!--<input type="checkbox">-->
                                        <span class="w16 h16 bradius4 bced d-inline-block mdi position-relative top3"
                                              :class="allChecks? 'mdi-check checks' : '' "
                                              @click="checkAll"
                                        ></span>
                                    </th>
                                    <th>编号</th>
                                    <th>姓名</th>
                                    <th>手机号码</th>
                                    <th>邮箱</th>
                                    <th>微信号</th>
                                    <th>录入时间</th>
                                    <th>标签</th>
                                    <th>成交金额</th>
                                    <!--<th>跟进人</th>-->
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody class="bgfff">
                                <tr v-for="(v,k) in lists" :key="k" class="curpointer" @click="toDetail(v.cardId)">
                                    <td @click.stop="">
                                        <span class="w16 h16 bradius4 bced d-inline-block mdi position-relative top3"
                                              :class="v.checked ? 'mdi-check checks':''"
                                              @click.stop="checkTap(k)"></span>
                                    </td>
                                    <td>{{v.customerId}}</td>
                                    <td>{{v.name}}</td>
                                    <td>{{v.phone}}</td>
                                    <td>{{v.email}}</td>
                                    <td>{{v.personalWx}}</td>
                                    <td>{{v.inputDate}}</td>
                                    <td class="lh30 fs14">

                                        <span class="p-l-20 p-r-20 bradius6 m-r-10 m-b-10 curpointer lh30 d-inline-block"
                                              v-for="(item,idx) in v.lableModelList" :key="idx"
                                              :class="item.lableColor.toLowerCase() == '#f5f5f6' ? 'c78' : 'cfff' "
                                              :style="{background:item.lableColor}"
                                        >
                                             {{item.lableName}}
                                         </span>

                                    </td>
                                    <td class="cffa133">￥{{v.turnoverAmount | formatMoney}}</td>
                                    <!--<td class="c26">跟进人</td>-->
                                    <td @click.stop>
                                        <a :href="'/main/add-client.html?id='+v.cardId">
                                            <span class="d-inline-block m-r-40 curpointer">编辑</span>
                                        </a>
                                        <a :href="'/main/shareCustomerDetail.html?id='+v.cardId">
                                            <span class="d-inline-block cblue curpointer">详情</span>
                                        </a>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                            <div class="textc" v-if=" !lists.length || lists.length < 0">暂无数据</div>
                        </div>


                        <!--分页-->
                        <div class="d-flex p-b-50 jsend">
                            <page-helper :page-number="page" :total-count="total" @change="jumpPage"></page-helper>
                        </div>

                    </div>

                </div>


            </div>

            <select-member v-model="ascriptionId" :is-show="to_member_show" @confirm="moveCustomer(1)" @cancel="to_member_show=false"></select-member>

        </div>

    </div>
</div>
<!-- All Jquery -->
<!-- ============================================================== -->
<script src="js/jquery.min.js"></script>
<!-- Bootstrap popper Core JavaScript -->
<!-- <script src="../assets/node_modules/bootstrap/js/popper.min.js"></script> -->
<script src="js/bootstrap.min.js"></script>
<!--<script src="js/iview.min.js"></script>-->
<!--<link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">-->
<!--<script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>-->
<!-- slimscrollbar scrollbar JavaScript -->
<script src="js/perfect-scrollbar.jquery.min.js"></script>
<!--Wave Effects -->
<!-- <script src="js/waves.js"></script> -->
<!--Menu sidebar -->
<script src="js/sidebarmenu.js"></script>
<!--Custom JavaScript -->
<script src="js/custom.min.js"></script>
<!-- ============================================================== -->
<!-- This page plugins -->
<!-- ============================================================== -->
<!--morris JavaScript -->
<!-- <script src="../assets/node_modules/raphael/raphael-min.js"></script>
<script src="../assets/node_modules/morrisjs/morris.min.js"></script> -->
<!--c3 JavaScript -->
<!-- <script src="../assets/node_modules/d3/d3.min.js"></script>
<script src="../assets/node_modules/c3-master/c3.min.js"></script> -->
<!-- Popup message jquery -->
<!-- <script src="../assets/node_modules/toast-master/js/jquery.toast.js"></script> -->
<!-- Chart JS -->
<!--<script src="js/dashboard1.js"></script>-->
<!-- ============================================================== -->
<!-- Style switcher -->
<!-- ============================================================== -->
<!-- <script src="../assets/node_modules/styleswitcher/jQuery.style.switcher.js"></script> -->
<script src="js/layer/layer.js"></script>
<!--<script src="../assets/node_modules/bootstrap-table/dist/bootstrap-table.min.js"></script>
<script src="../assets/node_modules/bootstrap-table/dist/bootstrap-table.ints.js"></script>-->
<script src="js/vue.js"></script>
<script src="js/config.js"></script><script src="js/extend.js"></script>
<!--<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>-->

<!--<script src="js/headers.js"></script>-->
<!--<script src="js/Aside.js"></script>-->

<script>
    $(function () {
        var vw = new Vue({
            el: '#main-wrapper',
            // components:{header},
            data: {
                username: '用户昵称',
                search_key: '',//搜索关键字
                useSearchKey: '',
                navs: [
                    {title: '全部', id: 4},
                    {title: '独占客户', id: 1},
                    {title: '成单客户', id: 3},
                    {title: '共享客户', id: 2},
                ],
                navs_id: 4,
                chooseArr: [],
                clientkey: '',//搜索姓名或电话用户
                lists:[],
                mainHeight:'',
                allChecks:false ,
                page: 1,
                total: 0,
                to_member_show: false,
                ascriptionId: '',
            },
            mounted() {
                this.getClientList();
            },
            methods: {
                exportData(){
                    let data = {
                        type: 2,
                        customerState: this.navs_id,
                    }
                    fetch($.baseUrl+'/crmPc/customer/getCustomerExport?data=' + $.base64.encode(JSON.stringify(data)), {
                        headers:{
                            token: localStorage.getItem('token')
                        },
                        method: 'POST',
                    }).then(res=>{
                        return res.blob();
                    }).then(res=>{
                        let link = document.createElement('a');
                        let url = window.URL.createObjectURL(res);
                        link.href = url;
                        link.download = '客戶列表.xls';

                        link.click();
                        window.URL.revokeObjectURL(url);
                    });
                },
                getClientList(){
                    var _this = this;

                    $.cAjax('/crmPc/customer/getCustomerPC',{
                        data:{
                            type: 2,
                            pageNum:this.page,
                            name: this.useSearchKey,
                            customerState: this.navs_id
                        }
                    }).then(function (res) {
                        _this.lists = res.pageInfo.list ? res.pageInfo.list.map(val=>{
                            try {
                                val.followRemark = JSON.parse(val.followRemark);
                            }catch (e) {
                                val.followRemark = {};
                            }

                            return val;
                        }) : [];
                        _this.allChecks = false;
                        _this.total = res.pageInfo.total;
                    })
                },
                jumpPage({currentPage}){
                    this.page = currentPage;
                    this.getClientList();
                },
                searchClient() {//搜索
                    this.useSearchKey = this.clientkey || '';
                    this.page = 1;
                    this.getClientList();
                },
                toMonopoly(){
                    let chooseArr = this.lists .filter(val=> val.checked);

                    if (!chooseArr.length) return;

                    let _this = this;
                    let customerIds = chooseArr.map(val => val.customerId);

                    $.cAjax('/crmPc/customer/updBatchCustomerState', {
                        data:{
                            customerIds: customerIds.join(',')
                        }
                    }).then(function (data) {
                        layer.alert('抢为独占成功', {time: 1500});
                        _this.allChecks = false ;
                        _this.getClientList();
                    });
                },
                showMemberList(){
                    let chooseArr = this.lists .filter(val=> val.checked);

                    if (!chooseArr.length) {
                        return;
                    }
                    this.to_member_show = true;
                },
                // 移动客户
                moveCustomer(customerState = 2) {
                    let chooseArr = this.lists .filter(val=> val.checked);

                    if (customerState==1 && !this.ascriptionId) {
                        layer.alert('请选择移交给的员工');
                        return;
                    }

                    if (!chooseArr.length) {
                        return;
                    }

                    let _this = this;
                    let customerIds = chooseArr.map(val => val.customerId);

                    $.cAjax('/crmPc/customer/moveCustomer', {
                        data:{
                            customerIds: customerIds.join(','),
                            ascriptionId: this.ascriptionId,
                            customerState: customerState
                        }
                    }).then(function (data) {
                        layer.alert('移交成功', {time: 1500});
                        _this.to_member_show = false;
                        _this.getClientList();
                    });
                },
                changeNav(id) {//切换导航
                    this.navs_id = id;
                },
                addClient() {//客户录入
                    location.href = location.origin + '/main/add-client.html'
                },
                checkAll(){
                    this.allChecks = !this.allChecks ;
                    let v= this ;
                    v.lists.forEach(function (i,k) {
                        v.$set(i,'checked' , v.allChecks) ;
                    })

                },
                checkTap(index){
                    let v = this ,
                        check_length = 0;
                    console.log(index)
                    v.$set(v.lists[index],'checked',!v.lists[index].checked);
                    v.lists.forEach(function (i,k) {
                        if(i.checked){
                            check_length ++ ;
                        }
                    });
                    if(check_length == v.lists.length){
                        v.allChecks = true ;
                    }else{
                        v.allChecks = false ;
                    }
                },
                toDetail(id){//客户详情
                    location.href='shareCustomerDetail.html?id='+id;
                }


            },
            computed:{
                isChooseClient(){
                    var check_length = 0;

                    this.lists.forEach(function (i,k) {
                        if(i.checked){
                            check_length ++ ;
                        }
                    });

                    return check_length != 0;
                },
            },
            watch:{
                navs_id: function () {
                    this.page = 1;
                    this.getClientList();
                }
            }
        })
    })
</script>

</body>

</html>












